﻿@{
    View.Title = "FusionTableHeatMap";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#year_slider").slider({
            range: true,
            min: 1973,
            max: 2010,
            values: [1990, 2000],
            slide: function (event, ui) {
                $("#year_range_selected").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        $("#year_range_selected").html($("#year_slider").slider("values", 0) + " - " + $("#year_slider").slider("values", 1));

        $("#magnitude_slider").slider({
            range: true,
            min: 3,
            max: 10,
            values: [7, 10],
            slide: function (event, ui) {
                $("#magnitude_range_selected").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        $("#magnitude_range_selected").html($("#magnitude_slider").slider("values", 0) + " - " + $("#magnitude_slider").slider("values", 1));

        $("#depth_slider").slider({
            range: true,
            min: 0,
            max: 750,
            values: [200, 550],
            slide: function (event, ui) {
                $("#depth_range_selected").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        $("#depth_range_selected").html($("#depth_slider").slider("values", 0) + " - " + $("#depth_slider").slider("values", 1));
    });
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
    var map;
    var layer;
    function clearMap() {
        alert("Not yet implemented!");
    }

    function updateMap(year) {
        alert("updating map" + year);
        layer.setQuery("SELECT * FROM 822471 WHERE Year = " + year);
    }



    function playTimeLine() {
        alert("Not yet implemented!");
        /*alert("TIMELINE GO!");
        var min = $("#year_slider").slider("option", "min")
        var max = $("#year_slider").slider("option", "max")

        for (i = min; i < max; i++) {
            setInterval("updateMap(" + i + ")", 3000);
        }*/
    }

    function FilterMap(fromYear, toYear, fromDepth, toDepth, fromMagni, toMagni) {
        layer.setMap(null);
        layer = new google.maps.FusionTablesLayer({
            query: {
                select: 'Latitude',
                from: '822471'
            },
            heatmap: {
                enabled: true
            }
        });
        layer.setMap(map);
        setTimeout(function () {
            $("img[src*='googleapis']").each(function () {
                $(this).attr("src", $(this).attr("src") + "&" + (new Date()).getTime());
            });
        }, 3000);
    }

    $(document).ready(function () {
        var reykjavik = new google.maps.LatLng(64.133333, -21.933333);

        map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: reykjavik,
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        });

        layer = new google.maps.FusionTablesLayer(822471, {
            query: "SELECT * FROM 822471",
            heatmap: true
        });
        layer.setMap(map);

        $("#stupidPlayButton")
			.button()
			.click(function () {
			    playTimeLine();
			});

        $("#filterButton")
			.button()
			.click(function () {
			    var fromYear = $("#year_slider").slider("values", 0);
			    var toYear = $("#year_slider").slider("values", 1);

			    var fromDepth = $("#depth_slider").slider("values", 0);
			    var toDepth = $("#depth_slider").slider("values", 1);

			    var fromMagni = $("#magnitude_slider").slider("values", 0);
			    var toMagni = $("#magnitude_slider").slider("values", 1);

			    FilterMap(fromYear, toYear, fromDepth, toDepth, fromMagni, toMagni);
			});
    });
</script>


<div id="map_canvas" style="height:100%;width:100%; float:left;"></div>
<div id="control_panel" style="height:100px;background:lightGrey;bottom:0;right:0;position:absolute;width:200px;padding: 5px;-webkit-border-radius: 10px 10px 0px 0px;left: 15%;width: 75%;">
    <div id="filterForm" title="Stillingar">
        <div id="filteringTools>
            <label for="year">Year: <span id="year_range_selected"></span></label><br />
            <div id="year_slider" style="margin:5px;"></div>

            <!--label for="magnitude">Magnitude: <span id="magnitude_range_selected"></span></label><br />
            <div id="magnitude_slider" style="margin:5px;"></div>

            <label for="depth">Depth: <span id="depth_range_selected"></span></label><br />
            <div id="depth_slider" style="margin:5px;"></div-->
        </div>
        <div id="stupidPlayButton">Play timeline</div>
        <div id="filterButton">Filter map</div>
    </div>
</div>